<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="mironcoder">
<meta name="email" content="mironcoder@gmail.com">
<meta name="template" content="Organe">
<meta name="title" content="Organe - Organic Food HTML Template">
<meta name="keywords" content="organe, organic, food, shop, ecommerce, store, html, agriculture, vegetable, organic food, organic product, organic farm, organic life, organic shop, food store">
<title>Organe - Register</title>
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="fonts/icofont/icofont.min.css">
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-5.0.0.css">
<link rel="stylesheet" href="css/custom/main.css">
<link rel="stylesheet" href="css/custom/user-form.css">
<script src="./js/jquery.js"></script>
</head>
<body>
<section class="user-form-part">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
        <div class="user-form-logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></div>
        <div class="user-form-card">
          <div class="user-form-title">
            <h2>Join Now!</h2>
            <p>Setup A New Account In A Minute</p>
          </div>
          <form class="user-form">
            <div class="form-group">
              <input type="text" class="form-control1" placeholder="Enter your name">
            </div>
            <div class="form-group">
              <input type="email" class="form-control2" placeholder="Enter your email">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter your password">
            </div>
            <div class="form-group">
              <input type="password" class="form-control3" placeholder="Enter repeat password">
            </div>
            <div class="form-button">
              <button type="button" class="form-control4">register</button>
            </div>
          </form>
          <script>
            $(".form-control4").click(function(){
              const url = "http://localhost:3000/api/reg"
              $.ajax({
                url:url,
                type:"POST",
                data:{
                      username:$(".form-control2").val(),
                      password:$(".form-control3").val(),
                      nikename:$(".form-control1").val(),
                    },
                    success: function(msg){
                      console.log(msg)
                        alert( "Data Saved: " + msg.msg );
                    }

              })
            })

          </script>

        </div>
        <div class="user-form-remind">
          <p>Already Have An Account? <a href="login.html">login here</a></p>
        </div>
        <div class="user-form-footer">
          <p>Organe | &COPY;Copyright by <a href="#">Mironcoder</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/vendor/popper.min.js"></script><script src="https://www.jq22.com/jquery/bootstrap-5.0.0.js"></script>
</body>
</html>